const { readFileSync, readdirSync } = require('fs')

let idPerfix = 'icon'
const svgTitle = /<svg([^>+].*?)>/
const clearHeightWidth = /(width|height)="([^>+].*?)"/g
const clearClass = /(class)="([^>+].*?)"/g
const hasViewBox = /(viewBox="[^>+].*?")/g
const clearReturn = /(\r)|(\n)/g

function requireSvgFile(dir) {
    const svgRes = []
    const dirents = readdirSync(dir, {
        withFileTypes: true
    })
    for (const dirent of dirents) {
        if (dirent.isDirectory()) {
            svgRes.push(...requireSvgFile(dir + dirent.name + '/'))
            continue
        }
        const svg = readFileSync(dir + dirent.name)
            .toString()
            .replace(clearReturn, '')
            .replace(clearClass, '')
            .replace(svgTitle, ($1, $2) => {
                // console.log(++i)
                // console.log(dirent.name)
                let width = 0
                let height = 0
                let content = $2.replace(clearHeightWidth, (s1, s2, s3) => {
                    if (s2 === 'width') {
                        width = s3
                    } else if (s2 === 'height') {
                        height = s3
                    }
                    return ''
                })
                if (!hasViewBox.test($2)) {
                    content += `viewBox="0 0 ${width} ${height}"`
                }
                return `<symbol id="${idPerfix}-${dirent.name.replace('.svg', '')}" ${content}>`
            })
            .replace('</svg>', '</symbol>')
        svgRes.push(svg)
    }
    return svgRes
}

/**
 * vite插件-构建svg
 * @param {*} path 
 * @param {*} perfix 
 * @returns 
 */
function vitePluginSvgBuilder(path, perfix = 'icon') {
    if (path === '') return
    idPerfix = perfix
    const res = requireSvgFile(path)
    return {
        name: 'svg-transform',
        transformIndexHtml(html) {
            return html.replace(
                '<body>',
                `
          <body>
            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="position: absolute; width: 0; height: 0">
              ${res.join('')}
            </svg>
        `
            )
        }
    }
}

module.exports = {
    requireSvgFile,
    vitePluginSvgBuilder,
}